<template>
  <div class="contentSlide">
    <div class="center">
      <div class="left">
          <div class="left-img">
            <img class="img-big" :src="goodItem.img" alt="">
          </div>
          <div class="left-buttom">
            <div class="buttom-box">
            <div class="left-buttom-top">
              {{goodItem.title}}
            </div>
            <div class="left-buttom-buttom">
              <div class="buttom-left">
                <img class="left-buttom-top-indoorimg" src="./img/indoor2x.png" alt="">
                室内商品总价：
                <span class="price">￥{{goodItem.indoorPrice}}</span>
              </div>
              <div class="buttom-right">
                <img class="left-buttom-top-fitupimg" src="./img/fitup2x.png" alt="">
                装修总价：
                <span class="price">￥{{goodItem.trimPrice}}</span>
              </div>
            </div>
            </div>
            <div class="buttom-look">
              <div class="look">
                点击查看
              </div>
            </div>
          </div>
      </div>
      <div class="right">
        <div class="top" @click="clickTop">
          <div class="top-img">
            <img class="topimg" src="./img/top2x.png" alt="">
          </div>
        </div>
        <div class="swiper">
          <ul>
            <li class="swiper-list" v-for="item in goods_info" :key="item.id" @click="clickSwiper(item)">
              <img class="swiper-list-img" :src="item.img" alt="">
            </li>
          </ul>
        </div>
        <div class="bottom" @click="clickBottom">
          <div class="bottom-img">
            <img class="bottomimg" src="./img/bottom2x.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
    name: 'contentSlide',
    props: {
      goodsInfo: {
        type: Array,
        required: true
      }
    },
    computed: {
      goods_info() {
        return this.goodsInfo
      },
    },
    data() {
      return {
        goodItem: this.goodsInfo[2]
      }
    },
    methods: {
      clickTop() {
        this.goods_info.push(this.goods_info.shift());
      },
      clickBottom() {
        this.goods_info.unshift(this.goods_info.pop());
      },
      clickSwiper(item) {
        this.goodItem = item
      }
    }
  }
</script>
<style scoped lang="scss">
.contentSlide {
  .center {
    width: 84%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .left {
      width: 75%;
      height: 700px;
      box-shadow:0px 3px 9px 0px rgba(193,193,193,1);
      border-radius:3px;
      cursor: pointer;
      .left-img {
        height: 600px;
        min-height: 600px;
        .img-big {
          width: 100%;
          height: 100%;
        }
      }
      .left-buttom {
        display: flex;
        justify-content: space-between;
      }
      .buttom-box {
        width: 70%;
      }
      .buttom-look {
        width: 30%;
        display: flex;
        align-items: center;
        .look {
          border: 2px solid #BE9D57;
          width: 100px;
          text-align: center;
          border-radius: 100px;
          margin: 0 auto;
        }
      }
      .left-buttom-top {
        margin: 20px 0 10px 14px;
        font-size: 14px;
      }
      .left-buttom-top-indoorimg {
        width: 16px;
        height: 20px;
        margin-bottom: 8px;
        vertical-align: middle;
      }
      .left-buttom-top-fitupimg {
        width: 16px;
        height: 20px;
        vertical-align: middle;
      }
      .left-buttom-buttom {
        display: flex;
        justify-content: space-between;
        margin: 20px 14px 10px 14px;
        font-weight: bold;
        font-size: 16px;
      }
    }
    .price {
      color: $mate-color;
    }
    .right {
      width: 23%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        background: #3B3B3B;
        border-radius: 4px;
        height: 30px;
        cursor: pointer;
        .top-img {
          width: 20px;
          height: 14px;
          margin: 0 auto;
          line-height: 30px;
          .topimg {
            width: 100%;
            height: 100%;
          }
        }
      }
      .swiper {
        flex-grow: 1;
        ul {
          height: 640px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
        }
        .swiper-list {
          width: 100%;
          height: 140px;
          min-width: 140px;
          border-radius: 4px;
          margin: 10px 0;
          transition: all 0.5s;
          cursor: pointer;
          &:first-child {
            margin-top: -150px;
          }
          &:last-child {
            margin-bottom: -150px;
          }
          .swiper-list-img {
            width: 100%;
            height: 100%;
            transition: all .5s;
          }
        }
      }
      .bottom {
        background: #3B3B3B;
        border-radius: 4px;
        height: 30px;
        cursor: pointer;
        .bottom-img {
          width: 20px;
          height: 14px;
          margin: 0 auto;
          line-height: 30px;
          .bottomimg {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
